/* Container for the grid */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three equal columns */
  grid-template-rows: repeat(2, 1fr); /* Two equal rows */
  gap: 10px; /* Adjust the gap between the cells */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 10%;
  margin-bottom: 10%;
}

/* Individual adjustments for each image */
#img-1 {
  width: 100%; /* Adjust image size */
  position: relative;
  top: 0px; /* Adjust vertical position */
  left: 0px; /* Adjust horizontal position */
}

#img-2 {
  width: 100%; /* Adjust image size */
  position: relative;
  top: 40px;
  left: 0;
}

#img-3 {
  width: 100%;
  position: relative;
  top: 80px;
  left: 0px;
}

#img-4 {
  width: 100%; /* Full width */
  position: relative;
  top: 60px;
  left: 0px;
}

#img-5 {
  width: 100%;
  position: relative;
  top: 100px;
  left: 0px;
}

#img-6 {
  width: 100%;
  position: relative;
  top: 140px;
  left: 0;
}

/* Media query to stack grid items on smaller screens */
@media (max-width: 768px) {
  .grid-container {
      grid-template-columns: 1fr; /* Stack items in a single column */
      grid-template-rows: repeat(6, auto);
      margin-bottom: 5%;
      margin-top: 5%;
  }
  #img-3 {
    bottom: 10%;
    
  }
  #img-4 {
  margin-top: 10%;
  }
}

#img-1:hover {
  transform: scale(1.05); /* Slight zoom on hover */
  opacity: 0.8; /* Slight opacity change */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition */
}

#img-2:hover {
  transform: scale(1.05); /* Slight zoom on hover */
  opacity: 0.8; /* Slight opacity change */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition */
}

#img-3:hover {
  transform: scale(1.05); /* Slight zoom on hover */
  opacity: 0.8; /* Slight opacity change */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition */
}

#img-4:hover {
  transform: scale(1.05); /* Slight zoom on hover */
  opacity: 0.8; /* Slight opacity change */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition */
}

#img-5:hover {
  transform: scale(1.05); /* Slight zoom on hover */
  opacity: 0.8; /* Slight opacity change */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition */
}

#img-6:hover {
  transform: scale(1.05); /* Slight zoom on hover */
  opacity: 0.8; /* Slight opacity change */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition */
}

.portfolio-link {
  color: #4170ff;
}

#pfhead{
  margin-top: 10%;
}